import React from "react";
import {Button, DatePicker, Form, Table} from "antd";
import {connect} from "react-redux";

import {get} from "@/axios/tools";

const { Item: FormItem } = Form;
const { RangePicker } = DatePicker;

const FORMAT_DATE = 'YYYY-MM-DD';

class FoodStatistic extends React.Component {
    constructor(props) {
        super(props);
    }

    state = {
        data: []
    }

    columns = [
        {
            title: '编号',
            dataIndex: 'food.id',
            key: 'food.id',
            width: 200
        },
        {
            title: '名称',
            dataIndex: 'food.name',
            key: 'name',
            width: 300
        },
        {
            title: '次数',
            dataIndex: 'count',
            key: 'count'
        }
    ]

    _requestData (timeData) {
        const {auth: {data: {restaurant}}} = this.props;
        get('/food/statisticsFood/', {restaurantID: restaurant, start: '', end: '', ...timeData})
            .then((res) => {
                this.setState({
                    data: res.list
                })
            })
    }
    handleSubmit = (e) => {
        console.log(e)
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let {time} = values;
                let data = {start: '', end: ''};
                if (time && time.length) {
                    data = {
                        start: time[0].format(FORMAT_DATE),
                        end: time[1].format(FORMAT_DATE),
                    };
                }
                this._requestData(data);
            }
        });
    }
    componentDidMount () {
        this._requestData();
    }

    render () {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="content-container">
                <Form layout={'inline'} onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('time')( <RangePicker /> )}
                    </FormItem>
                    <FormItem>
                        <Button
                            type="primary"
                            htmlType="submit"
                        >
                            搜索
                        </Button>
                    </FormItem>
                </Form>
                <div className="space-bar"></div>
                <Table rowKey={record => record.food.id} columns={this.columns} dataSource={this.state.data} pagination={false}></Table>
            </div>
        )
    }
}


const mapStateToProps = state => {
    const {auth = {data: {}}} = state.httpData;
    return {auth};
};

export default connect(mapStateToProps)(Form.create()(FoodStatistic));